<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>静态操作</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .page {
            width: 500px;
            height: 40px;
        }

        .page button {
            float: left;
            margin-left: 5px;
            width: 80px;
            height: 40px;
        }

        .page .content {
            float: left;
        }

        .page .content .item {
            float: left;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
            margin-left: 5px;
            background-color: black;
            color: burlywood;
        }

        .page .content .active {
            color: red;
        }
    </style>
</head>

<body>
    <div id="page">

    </div>
</body>
<script>
    function Page(option) {//option表示参数  参数是一个对象
        this.ele = document.querySelector(option.el);//找到目标元素
        this.ele.className = "page";
        this.data = option.data;//表示所有的数据
        this.pageIndex = 1;//默认选中的是第一页
        // this.total = option.data.total;
        this.create();//创造
        this.bindData();//绑定数据
        //this.bindEvent();//绑定事件
    }
    // Page.prototype.bindEvent = function () {

    //     let that = this;

    //     this.nextBtn.onclick = function () {//下一页
    //         that.pageIndex++;//页码加1
    //         that.bindData();//重新生成一下

    //     }
    //     this.prevBtn.onclick = function () {//下一页
    //         that.pageIndex--;//页码减1
    //         that.bindData();//重新生成一下
    //     }

    // }

    Page.prototype.bindData = function () {//绑定数据
        let that =this;
        this.allPage = Math.ceil(this.data.total / this.data.shownum); //101/10
        //11  
        //
        let start = 1;//开头

        let end = this.allPage > this.data.showpage ? this.data.showpage : this.allPage;

        //假如 总数是101 每页显示10条  总页码是11  11>5         显示1到5页
        //     总数是11  每页显示10条  总页码是2   2>5 不成立    显示1到2
        //开头和结尾
        //当pageIndex小于3      显示    1  2  3  4  5
        //当pangeIndex大于3     显示    2  3  4  5  6

        //当页码在中间的时候
        this.middleNum = Math.ceil(this.data.showpage / 2);//5/2  中间数据为3

        if (this.pageIndex > this.middleNum) {//大于中间数4>3

            start = this.pageIndex - this.middleNum + 1;// 4-3+1;
            end = this.pageIndex + this.middleNum - 1;//4+3-1
        }
        //末尾的判断  11 -3  到达末尾以后  固定好开头和结尾
        if(this.pageIndex>this.allPage-this.middleNum){//>11-3  >8
            start = this.allPage -this.data.showpage+1 ;//11 - 5 +1 ;
            end  = this.allPage;//结尾
        }

        start  = start>1?start:1;//处理开头


        this.content.innerHTML = "";

        for (let i = start; i <= end; i++) { //循环的去生成页码
            let item = document.createElement("div");
            if (this.pageIndex == i) {
                item.className = "item active";
            } else {
                item.className = "item";
            }

            item.innerHTML = i;

            item.onclick = function(){//点击以后 改变index  在重新生成

                that.pageIndex = i;
                that.bindData();
            },

            this.content.appendChild(item);
        }

        //做一个事件绑定的判断  最开始都不能点击
        this.prevBtn.disabled = true;
        this.nextBtn.disabled = true;
        this.prevBtn.onclick = null;
        this.nextBtn.onclick = null;
        

        if(this.pageIndex!=1){//上一页可用
            this.prevBtn.disabled = false;

            this.prevBtn.onclick =function(){
                that.pageIndex--;
                that.bindData();
            }

        }

        if(this.pageIndex!=this.allPage){//下一页可用
            this.nextBtn.disabled = false;
            this.nextBtn.onclick = function(){
                that.pageIndex++;
                that.bindData();
            }

        }



    }


    Page.prototype.create = function () {// 生成结构

        this.prevBtn = document.createElement("button");
        this.prevBtn.innerHTML = "上一页";
        this.ele.appendChild(this.prevBtn);

        this.content = document.createElement("div");
        this.content.className = "content";
        this.ele.appendChild(this.content);


        this.nextBtn = document.createElement("button");
        this.nextBtn.innerHTML = "下一页";
        this.ele.appendChild(this.nextBtn);


    }





    new Page({
        el: "#page",
        data: {
            total: 101,//数据总数是100,
            shownum: 10,//表示每页显示10条数据
            showpage: 5,//表示连续的页码数为5
        }
    })


</script>

</html>